<script lang="ts" setup name="basic-data">
import type { FieldValues, PlusColumn } from 'plus-pro-components'

import { toRefs } from 'vue'

const props = withDefaults(defineProps<{
    schema?: any
    schemaData?: any
    title?: string
}>(), {
    schema: [],
    schemaData: [],
    title: '基础资料',
})

const formData = ref<FieldValues>({
    address: '浙江省杭州市西湖区工专路',
    age: '23',
    consignee: '曲婷婷',
    gift: 0,
    identification: '422301198411332223',
    name: '曲婷婷',
    status: '18990900900',
    wechat: 'xiaowangzi1995',
})
const columns: PlusColumn[] = [
    {
        label: '会员姓名',
        prop: 'name',
        valueType: 'copy',
        width: 120,
    },
    {
        label: '联系方式',
        prop: 'status',
        valueType: 'copy',
        width: 120,
    },
    {
        label: '会员性别',
        options: [
            {
                label: '男',
                value: '0',
            },
            {
                label: '女',
                value: '1',
            },
        ],
        prop: 'gift',
        valueType: 'radio',
    },
    {
        label: '会员年龄',
        prop: 'age',
        valueType: 'copy',
        width: 120,
    },
    {
        label: '身份证号',
        prop: 'identification',
        valueType: 'copy',
        width: 120,
    },
    {
        label: '微信号',
        prop: 'wechat',
        valueType: 'copy',
        width: 120,
    },
    {
        label: '常用收货人',
        prop: 'consignee',
        valueType: 'copy',
        width: 120,
    },
    {
        label: '详细地址',
        prop: 'address',
        valueType: 'copy',
        width: 120,
    },
]
function handleChange(values: FieldValues) {
    console.log(values, 'change')
}
function handleSubmit(values: FieldValues) {
    console.log(values, 'Submit')
}
function handleSubmitError(err: any) {
    console.log(err, 'err')
}
function handleReset() {
    console.log('handleReset')
}

const dialogFormVisible = ref(false)
function redactProfile() {
    dialogFormVisible.value = true
    console.log('dasdasd')
}
const { schema, title } = toRefs(props)

const circleUrl = '/assets/imgs/main-logo.svg'
</script>

<template>
    <el-card mb-20>
        <el-row class="el-descriptions__title m10">
            {{ title }}
        </el-row>

        <el-row>
            <el-col :span="4">
                <div class="avatar_sty"
                     flex
                     flex-col
                     flex-justify-evenly
                     flex-items-center
                >
                    <el-avatar :size="65"
                               :src="circleUrl"
                    />

                    <el-button type="primary"
                               size="small"
                               @click="redactProfile"
                    >
                        编辑资料
                    </el-button>
                </div>
            </el-col>

            <el-col :span="14">
                <el-descriptions>
                    <template v-for="(item, index) in schema"
                              :key="index"
                    >
                        <el-descriptions-item :label="item.label">
                            {{ schemaData[0][item.key] || '' }}
                        </el-descriptions-item>
                    </template>
                </el-descriptions>
            </el-col>
        </el-row>
    </el-card>

    <div>
        <el-dialog v-model="dialogFormVisible"
                   title="编辑会员资料"
                   width="800"
        >
            <PlusForm v-model="formData"
                      :columns="columns"
                      :row-props="{ gutter: 20 }"
                      :col-props="{
                          span: 12,
                      }"
                      label-position="top"
                      @change="handleChange"
                      @submit="handleSubmit"
                      @submit-error="handleSubmitError"
                      @reset="handleReset"
            />
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
  .avatar_sty {
    height: 100%;
}
</style>
